<template>
    <div class="main">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="">
                <el-input v-model="formInline.searchContent" placeholder="登录账号/公司名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">所有用户</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleAdd">添加</el-button>
            </el-form-item>
        </el-form>

        <hr />

        <div class="box">
            <el-table
            :data="tableData"
            stripe
            height="520px"
            style="width: 100%">
                <el-table-column
                prop="operation"
                label="操作"
                width="180">
                    <template slot-scope="scope">
                        <el-button @click="editUser(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small" @click="deleteById(scope.row.id)">删除</el-button>
                        <el-button type="text" size="small" @click="fixPwd(scope.row.id)">改密</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                type="index"
                width="55">
                </el-table-column>
                <el-table-column
                prop="user"
                label="登录账号"
                width="120">
                </el-table-column>
                <el-table-column
                prop="name"
                label="姓名"
                width="120">
                </el-table-column>
                <el-table-column
                prop="updateT"
                label="更新时间"
                width="180">
                </el-table-column>
                <el-table-column
                prop="company"
                label="所属公司"
                width="180">
                </el-table-column>
                <el-table-column
                prop="state"
                label="状态"
                width="80">
                </el-table-column>
                <el-table-column
                prop="identity"
                label="身份"
                width="180">
                </el-table-column>
                <el-table-column
                prop="industry"
                label="所属行业"
                width="180">
                </el-table-column>
                <el-table-column
                prop="post"
                label="职务"
                width="180">
                </el-table-column>
                <el-table-column
                prop="department"
                label="科室"
                width="180">
                </el-table-column>
                <el-table-column
                prop="link"
                label="联系方式"
                width="180">
                </el-table-column>
                <el-table-column
                prop="effective"
                label="有效期"
                width="180">
                </el-table-column>
            </el-table>

            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[8, 16, 24, 32]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </div>

        <!-- 添加用户 -->
        <el-dialog
            title="添加用户"
            :visible.sync="dialogUserVisible"
            width="800px"
            :before-close="handleClose"
        >
            <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" :rules="rules">
                <el-form-item label="所属公司" prop="company">
                    <el-input v-model="formInline.company" placeholder="请选择" readonly @click.native="dialogCompanyVisible=true"></el-input>
                </el-form-item>
                <el-form-item label="登录账号" prop="user">
                    <el-input v-model="formInline.user"></el-input>
                </el-form-item>
                <el-form-item label="用户姓名" prop="username">
                    <el-input v-model="formInline.username"></el-input>
                </el-form-item>
                <el-form-item label="登录密码" prop="password">
                    <el-input v-model="formInline.password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="pwd">
                    <el-input v-model="formInline.pwd"></el-input>
                </el-form-item>
                <el-form-item label="用户级别">
                    <el-select v-model="formInline.level">
                        <el-option label="Ⅰ" value="Ⅰ"></el-option>
                        <el-option label="Ⅱ" value="Ⅱ"></el-option>
                        <el-option label="Ⅲ" value="Ⅲ"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="formInline.id === null ? addUser(formInline) : submitChange(formInline)">保存</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 选择公司 -->
        <el-dialog title="选择公司" :visible.sync="dialogCompanyVisible" width="500px">
            <company-list @option-company="optionCompany" :isDialog="true"></company-list>
        </el-dialog>

        <!-- 改密码 -->
        <el-dialog title="修改密码" :visible.sync="dialogFixPwdVisible" width="500px">
            <el-form :model="pwdForm" ref="pwdForm" label-width="80px" :rules="rules">
                <el-form-item label="新密码" prop="newpwd">
                    <el-input v-model="pwdForm.newpwd"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmpwd">
                    <el-input v-model="pwdForm.confirmpwd"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="savePwd('pwdForm')">保存</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import operateApi from '@/api/operate'
import CompanyList from '@/views/companyList'
import userListApi from '@/api/userList'

export default {
    components: {CompanyList},

    data() {
        // 创建用户自定义确认密码校验
        const validatePass1 = (rule, value, callback) => {
            if(value == this.formInline.password){
                callback()
            }else{
                callback(new Error("新密码与确认密码不一致"))
            }
        }

        // 修改密码自定义确认密码校验
        const validatePass2 = (rule, value, callback) => {
            if(value == this.pwdForm.newpwd){
                callback()
            }else{
                callback(new Error("新密码与确认密码不一致"))
            }
        }

      return {
        formInline: {
          searchContent: ''
        },
        tableData: [],
        currentPage: 4,
        total: 0,
        pageSize: 8,
        dialogUserVisible: false, //添加编辑用户对话框
        dialogCompanyVisible: false, //选择公司对话框
        dialogFixPwdVisible: false, //修改密码对话框
        formInline: {
            id: null,
            company: '',
            user: '',
            username: '',
            password: '',
            pwd: '',
            level: 'Ⅰ'
        },
        pwdForm: {
            id: '',
            newpwd: '',
            confirmpwd: ''
        },
        rules: {
            company: [
              {required: true, message: '公司不能为空', trigger: 'blur'}
            ],
            user: [
              {required: true, message: '登录账号不能为空', trigger: 'blur'}
            ],
            username: [
              {required: true, message: '用户姓名不能为空', trigger: 'blur'}
            ],
            password: [
              {required: true, message: '密码不能为空', trigger: 'blur'}
            ],
            pwd: [
              {required: true, message: '确认密码不能为空', trigger: 'blur'},
              {validator: validatePass1, trigger: 'change'}
            ],
            newpwd: [
              {required: true, message: '新密码不能为空', trigger: 'blur'}
            ],
            confirmpwd: [
              {required: true, message: '确认密码不能为空', trigger: 'blur'},
              {validator: validatePass2, trigger: 'change'}
            ]
        }
      }
    },

    created() {
        this.getUserList()
    },

    methods: {
        // 获取用户信息
        getUserList(){
            const token = localStorage.getItem('seeto-token').token
            operateApi.getOperateUser(token, this.currentPage, this.pageSize, this.formInline).then(response => {
                const resp = response.data
                if(resp.flag){
                    this.total = resp.data.total
                    this.tableData = resp.data.rows
                }else{
                    this.$message({
                        message: resp.message,
                        type: 'warning'
                    })
                }
            })
        },

        // 删除用户
        deleteById(id){
            this.$confirm('确认删除这条记录吗？', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消'
            }).then(() => {
                console.log('确认')
                userListApi.deleteById(id).then(response => {
                    const resp = response.data
                    if(resp.flag){
                        this.$message({
                            message: resp.message,
                            type: 'success'
                        })
                    }else{
                        this.$message({
                            message: resp.message,
                            type: 'warning'
                        })
                    }
                })
            }).catch(() => {
                console.log('取消')
            })
        },

        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.getUserList()
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.currentPage = val
            this.getUserList()
        },

        onSubmit() {
            console.log('submit!');
            this.getUserList()
        },

        // 关闭弹窗
        handleClose(done){
            done()
        },

        // 添加用户
        handleAdd(){
            this.dialogUserVisible = true
            this.$nextTick(() => {
                this.$refs.formInline.resetFields()
            })
            console.log(this.formInline)
        },

        // 添加用户
        addUser(formInline){
            this.$refs.formInline.validate(valid => {
                if(valid){
                    this.handleAdd()
                    userListApi.addUser(this.formInline).then(response => {
                        const resp = response.data
                        if(resp.flag){
                            this.$message({
                                message: resp.message,
                                type: 'success'
                            })
                        }else{
                            this.$message({
                                message: resp.message,
                                type: 'warning'
                            })
                        }
                    })
                }else{
                    return false
                }
                this.dialogUserVisible = false
            })
        },

        optionCompany(currentRow){
            console.log('paren', currentRow)
            console.log(currentRow.company)
            this.formInline.company = currentRow.company
            this.dialogCompanyVisible = false
        },

        // 修改密码
        fixPwd(id){
            this.dialogFixPwdVisible = true
            this.$nextTick(() => {
                this.$refs.pwdForm.resetFields()
            })
            this.pwdForm.id = id
        },

        // 提交修改密码
        savePwd(pwdForm){
            this.$refs[pwdForm].validate(valid => {
                if(valid){
                    userListApi.fixUserPassword(pwdForm).then(response => {
                        const resp = response.data
                        if(resp.flag){
                            this.$message({
                                message: resp.message,
                                type: 'success'
                            })
                        }else{
                            this.$message({
                                message: resp.message,
                                type: 'warning'
                            })
                        }
                    })
                    this.dialogFixPwdVisible = false
                }else{
                    return false
                }
            })
        },

        // 编辑用户
        editUser(val){
            console.log(val)
            this.handleAdd()
            userListApi.getUserById(val.id).then(response => {
                const resp = response.data
                if(resp.flag){
                    const respD = resp.data
                    this.formInline.id = respD.id
                    this.formInline.company = respD.company
                    this.formInline.user = respD.user
                    this.formInline.username = respD.username
                    this.formInline.password = respD.password
                    this.formInline.pwd = respD.pwd
                    this.formInline.level = respD.level
                }else{
                    this.$message({
                        message: resp.message,
                        type: 'warning'
                    })
                }
            })
            this.dialogUserVisible = true
        },

        // 提交修改
        submitChange(form){
            this.$refs.formInline.validate(valid => {
                if(valid){
                    userListApi.updateUser(this.formInline).then(response => {
                        const resp = response.data
                        if(resp.flag){
                            this.$message({
                                message: resp.message,
                                type: 'success'
                            })
                        }else{
                            this.$message({
                                message: resp.message,
                                type: 'warning'
                            })
                        }
                    })
                    this.dialogUserVisible = false
                }else{
                    return false
                }
            })
        }
    }
}
</script>

<style scoped>
hr{
    padding: 0;
    margin: 0;
}

.box{
    height: 570px;
    width: 1170px;
    /* background-color: pink; */
}

.block{
    margin-top: 10px;
}
</style>